<template>
    <div>
        <img class="nav-logo" src="http://api.zhonpay.com/uploads/20210316/4ddd9b4411794a32b04eed6bef99c453.jpg" alt="logo">
        <div class="handle">
            <el-popover placement="bottom" width="150" trigger="hover" popper-class="popper" @after-enter="popoverHandle">
                <div class="handle-btn" @click="$router.push('/add-user')" v-if="identity === 'super'">添加商户</div>
                <div class="handle-btn" @click="quit">退出/切换账号</div>
                <div class="handle-box" slot="reference"></div>
            </el-popover>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeIndex: "1",
            identity: "",
        };
    },
    methods: {
        //防止logo页层级被遮挡，因为popper层级会叠加
        popoverHandle() {
            document.querySelector(".popper").style.zIndex = 1000;
        },
        setStatus(meta) {
            if (meta.user === "agent") {
                this.identity = "agent";
            } else if (meta.user === "master") {
                this.identity = "master";
            } else {
                this.identity = "super";
            }
            if (meta.index !== undefined) {
                this.activeIndex = meta.index;
            }
        },
        quit() {
            const self = this;
            this.$store.commit("user/removeUserSign");
            this.$router.push({ name: "route2" });
            this.$axios({
                url: "Admin/user/loginOut",
                data: { token: "" },
                success(res) {
                    if (res.data.code == 200) {
                        self.$router.push({ path: "/login" });
                    }
                    history.pushState(null, null, document.URL);
                    window.addEventListener(
                        "popstate",
                        function (e) {
                            history.pushState(null, null, document.URL);
                        },
                        false
                    );
                },
            });
        },
    },
    watch: {
        $route(to, from) {
            this.setStatus(to.meta);
        },
    },
    created(e) {
        this.setStatus(this.$route.meta);
    },
};
</script>

<style scoped>
.fix-menu {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 10;
}

.nav-logo {
    height: 30px;
    margin: 15px 0 0 65px;
}

.el-menu-nav {
    width: 100%;
    height: 60px;
}
.el-menu-nav > .el-menu-item,
.el-menu-nav > .el-submenu {
    padding: 0;
}
.logo {
    display: block;
    position: relative;
    width: 150px;
    height: 30px;
}
.logo img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 70px;
    margin: auto;
}
.el-menu-item a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0 20px;
}
.el-menu-nav > .el-menu-item:hover {
    height: 58px !important;
}
.el-menu-nav > .el-menu-item.is-active:hover {
    height: 60px !important;
}
.handle {
    position: absolute;
    top: 5px;
    right: 30px;
}
.handle-box {
    width: 50px;
    height: 50px;
    color: #409eff;
    line-height: 50px;
    text-align: center;
    background: url(../../imgs/logo.jpg) center / cover no-repeat;
    border: 1px solid #409eff;
    border-radius: 50%;
    outline: none;
    cursor: pointer;
}
.handle-btn {
    margin: 5px 0;
    font-size: 15px;
    cursor: pointer;
}
.handle-btn:hover {
    color: #409eff;
}
</style>
